<template>
    <div class="py-20 md:py-28 text-center bg-grayLight">
        <div class="container m-auto">
            <h2 class="text-38px text-black mb-8 font-bold px-6">各產業客製化<br class="block md:hidden">CDN專案</h2>
            <div class="hidden md:flex flex-wrap">
                <div class="m-1/2 m-auto md:w-1/4 p-2">
                    <h3 class="text-2xl font-bold text-black mb-2">
                        雲端遊戲
                    </h3>
                    <div class="relative">
                        <img :src="img1" alt="雲端遊戲">
                        <div class="p-3 absolute bottom-0 text-white text-left">
                            <h5>專為高資源遊戲量身打造CDN專案，確保順暢的遊戲性能，提升玩家的遊戲體驗。</h5>
                        </div>
                    </div>
                </div>
                <div class="m-1/2 m-auto md:w-1/4 p-2">
                    <h3 class="text-2xl font-bold text-black mb-2">
                        雲端直播
                    </h3>
                    <div class="relative">
                        <img :src="img2" alt="雲端遊戲">
                        <div class="p-3 absolute bottom-0 text-white text-left">
                            <h5>以最最新CDN技術低延遲與最高影像品質提供不間斷的直播傳輸，實現真正即時的直播體驗。</h5>
                        </div>
                    </div>
                </div>
                <div class="m-1/2 m-auto md:w-1/4 p-2">
                    <h3 class="text-2xl font-bold text-black mb-2">
                        雲端金融
                    </h3>
                    <div class="relative">
                        <img src="../assets/images/frame-3.webp" alt="雲端遊戲">
                        <div class="p-3 absolute bottom-0 text-white text-left">
                            <h5>客製化CDN專案為雲端金融提供高效與極致安全的數據傳輸，確保金融交易的穩定性與可靠性。</h5>
                        </div>
                    </div>
                </div>
                <div class="m-1/2 m-auto md:w-1/4 p-2">
                    <h3 class="text-2xl font-bold text-black mb-2">
                        跨境電商
                    </h3>
                    <div class="relative">
                        <img src="../assets/images/frame-4.webp" alt="雲端遊戲">
                        <div class="p-3 absolute bottom-0 text-white text-left">
                            <h5>為電商提供全球化的內容傳遞與穩定的網絡體驗，實現網購的高效率與高滿意度。</h5>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="md:hidden">
            <sliderBlock></sliderBlock>
        </div>
            
        
    </div>
    <div class="bg-gradient-to-r from-purple to-purpleLight text-center py-16">
        <h2 class="text-38px font-bold text-white mb-12">找到屬於自己的<br class="block md:hidden">客製 CDN 服務</h2>
        <a class="bg-orange hover:bg-orangeDark text-white text-l font-bold rounded py-4 px-14 inline-flex items-center justify-center"
                href="https://tw.cocloud.com/zh-tw/contact_us/">立即諮詢</a>
    </div>
</template>
<script setup>
import sliderBlock from './_sliderBlock.vue';
import img1 from '@/assets/cdn/images/frame-1.webp'
import img2 from '@/assets/cdn/images/frame-2.webp'
</script>
  